<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Creating an animated panel</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Creating an animated panel</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example demonstrates how to instantiate a panel and use it in conjunction with the <code>&quot;transition&quot;</code> module to create an animated panel.</p>
</div>

<div class="example newwindow">
    <a href="panel-animate-example.html" target="_blank" class="button">
        View Example in New Window
    </a>
</div>
<h2>Creating an animated panel</h2>
<h3>Setting Up The YUI Instance</h3>

<p>To create an instance of a Panel on your page, the only module you need to request is the <code>panel</code> module. The <code>panel</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code>, <code>widget-stdmod</code>, <code>widget-buttons</code>, <code>widget-modality</code> and <code>widget-autohide</code> extensions it uses.</p>

<p>For this example, we also need to use the <code>transition</code> module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.

<pre class="code prettyprint">YUI({...}).use(&quot;panel&quot;, &quot;transition&quot;, function(Y) {
    &#x2F;&#x2F; We&#x27;ll write example code here
});</pre>


<p>Note, using the <code>panel</code> module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class <code>yui3-skin-sam</code> on a parent element, commonly the <code>&lt;body&gt;</code> tag.</p>

<h3>Instantiating the Panel</h3>

<p>For this example, we'll instantiate a modal panel, set its visibility to false, and set some CSS properties. The following HTML will be used as the markup for the panel.</p>

<pre class="code prettyprint">&lt;div id=&quot;panelContent&quot;&gt;
  &lt;div class=&quot;yui3-widget-hd&quot;&gt;
    Showing an animated panel
  &lt;&#x2F;div&gt;
  &lt;div class=&quot;yui3-widget-bd&quot;&gt;
    &lt;p&gt;Making panels animate is easy with the &quot;transition&quot; module!&lt;&#x2F;p&gt;
  &lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<p>The JavaScript to instantiate the panel is as follows:</p>

<pre class="code prettyprint">var panel = new Y.Panel({
  srcNode: &quot;#panelContent&quot;,
  width:330,
  xy: [300, -300], &#x2F;&#x2F;we render the panel off the page
  modal:true,
  visible:false,
  zIndex: 5,
  buttons: [
    {
      value: &quot;Close the panel&quot;,
      action: function(e) {
        e.preventDefault();
        hidePanel();
      },
      section: &quot;footer&quot;
    }
  ],
  render:true
});</pre>



<h3>Adding Animation</h3>

<p>To create the animations, we need to set up transition properties on the panel's <code>boundingBox</code>. These properties consist of key/value pairs of CSS properties that we want to alter.</p>

<p>We define two methods <code>showPanel()</code> and <code>hidePanel()</code> that define transitions. We could also use the <code>visibleChange</code> event to toggle the animation based on the state. However, the benefit of this method is that it allows us to use callback functions after the <code>transition</code> has ended.</p>


<pre class="code prettyprint">function showPanel () {
  panel.show(); &#x2F;&#x2F;show the panel to make it visible, then transition it in.
  bb.transition({
    duration: 0.5,
    top:&quot;80px&quot;
  });
}

function hidePanel () {
  bb.transition({
    duration: 0.5,
    top:&quot;-300px&quot;
  }, function() {
    panel.hide(); &#x2F;&#x2F;hide the panel after this transition ends
  });
}</pre>



<h3>Adding Buttons to toggle visibility</h3>

<p>Finally, we create two buttons, one to show the panel and one to hide it.</p>

<p>The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:</p>
<pre class="code prettyprint">&#x2F;&#x2F;Add Panel Show Button
openBtn.on(&#x27;click&#x27;, function(e) {
  showPanel();
});</pre>


<h3>Complete Example Source</h3>
<pre class="code prettyprint">&lt;style type=&quot;text&#x2F;css&quot;&gt;
	.yui3-panel {
outline:none;
}

.yui3-panel #panelContent {
-webkit-box-shadow: 0px 0px 2px black;
-moz-box-shadow: 0px 0px 2px black;
box-shadow: 0px 0px 2px black;
}
.yui3-panel #panelContent .yui3-widget-hd {
font-weight:bold;
padding:5px;

}

#panelContent .yui3-widget-bd {
padding:15px;
background:white;
text-align:center;
}


.yui3-skin-sam .yui3-widget-mask {
background-color: #223460;
opacity: 0.9;
}

&lt;&#x2F;style&gt;

&lt;h2&gt;Creating an animated panel using transitions&lt;&#x2F;h2&gt;
&lt;p&gt;This example shows an animated modal form.
&lt;input type=&quot;button&quot; value=&quot;Open Panel&quot; id=&quot;openButton&quot;&gt;&lt;&#x2F;p&gt;
 
&lt;p&gt;Now let&#x27;s fill this space with some text so that the modality kicks in.&lt;&#x2F;p&gt;

&lt;p&gt;Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros, nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna. Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis vitae. Nam ornare justo a turpis mattis cursus.&lt;&#x2F;p&gt;

 &lt;div id=&quot;panelContent&quot;&gt;
 &lt;div class=&quot;yui3-widget-hd&quot;&gt;
   Showing an animated panel
 &lt;&#x2F;div&gt;
 &lt;div class=&quot;yui3-widget-bd&quot;&gt;
   &lt;p&gt;Making panels animate is easy with the &quot;transition&quot; module!&lt;&#x2F;p&gt;
   
 &lt;&#x2F;div&gt;
 &lt;&#x2F;div&gt;
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
	YUI().use(&quot;transition&quot;, &quot;panel&quot;, function(Y) {
var openBtn = Y.one(&#x27;#openButton&#x27;),
panel = new Y.Panel({
  srcNode: &quot;#panelContent&quot;,
  width:330,
  xy: [300, -300],
  modal:true,
  visible:false,
  zIndex: 5,
  buttons: [
    {
      value: &quot;Close the panel&quot;,
      action: function(e) {
        e.preventDefault();
        hidePanel();
      },
      section: &quot;footer&quot;
    }
  ],
  render:true
}),

bb = panel.get(&#x27;boundingBox&#x27;);

openBtn.on(&#x27;click&#x27;, function(e) {
  showPanel();
});

function showPanel () {
  panel.show();
  bb.transition({
    duration: 0.5,
    top:&quot;80px&quot;
  });
}

function hidePanel () {
  bb.transition({
    duration: 0.5,
    top:&quot;-300px&quot;
  }, function() {
    panel.hide();
  });
}

    
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
                                        <a href="panel-form.html">Creating a modal form</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create a panel that animates as it is shown and hidden">
                                        <a href="panel-animate.html">Creating an animated panel</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
